<template>
    <div>
        <div class="scatter" ref="scatter">

        </div>
    </div>    
</template>

<script>
const charts = require("echarts")
export default {
    data() {
        return {

        }
    },

    mounted() {
        this.fun()
    },

    methods: {
        fun() {

            let data = [
                {
                    name: 12,
                    age: 20
                },
                {
                    name: 24,
                    age: 30
                },
                {
                    name: 36,
                    age: 40
                },
                {
                    name: 48,
                    age: 50
                },
                {
                    name: 60,
                    age: 60
                },
                {
                    name: 72,
                    age: 70
                },
                {
                    name: 84,
                    age: 80
                },
                {
                    name: 96,
                    age: 90
                },
                {
                    name: 19,
                    age: 100
                }
            ]
           let a=  data.map((itme) => {
                return [itme.name,itme.age]
            })
            const chart = charts.init(this.$refs.scatter)
            const option = {
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    data: ["测试"]
                },
                yAxis: {
                    scale: true,
                    axisLabel: {}
                },
                xAxis: {
                    scale: true
                },
                series: [
                    {
                        name: "测试",
                        symbolSize: (data) => {
                            // 散点图点的大小的设置
                            return 10
                        },
                        data: a,
                        // 无波动的散点图
                        // type: "scatter",
                        // 有波动的散点图
                        type: "effectScatter",
                        showEffectOn: "render",
                        rippleEffect: {
                            scale: 8
                        },
                        // 动画的大小
                        itemStyle: {
                            color: "red"
                        }
                    }
                ]
            }
            chart.setOption(option)
        }
    }
}
</script>
<style scoped>
    .scatter {
        width: 500px;
        height: 500px;
    }
</style>